<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>文章列表</title>
	<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/iconfont.css">
	<link rel="stylesheet" href="./css/main.css">
	<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
	<script src="./libs/jquery-1.12.4.min.js"></script>
	<script src="./libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="./libs/jquery.twbsPagination.js"></script>
	<!-- 引入模板引擎js文件 -->
	<script src="./libs/template-web.js"></script>
</head>

<body>
	<div class="container-fluid">
		<div class="common_title">
			文章列表
		</div>
		<div class="container-fluid common_con">
			<div class="row opt_btns">
				<div class="col-xs-6">
					<form class="form-inline">
						<select id="selCategory" name="" class="form-control input-sm">
							<option value="">所有分类</option>
							<option>未分类</option>
							<option>奇趣事</option>
							<option>会生活</option>
							<option>爱旅行</option>
						</select>
						<select id="selStatus" name="" class="form-control input-sm">
							<option value="">所有状态</option>
							<option value="草稿">草稿</option>
							<option value="已发布">已发布</option>
						</select>
						<button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
					</form>
				</div>
				<div class="col-xs-6">
					<a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
				</div>
			</div>
			<table class="table table-striped table-bordered table-hover mp20">
				<thead>
					<tr>
						<th>标题</th>
						<th>作者</th>
						<th>分类</th>
						<th class="text-center">发表时间</th>
						<th class="text-center">状态</th>
						<th class="text-center" width="100">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>王积千造统最头</td>
						<td>杰克</td>
						<td>奇趣事</td>
						<td class="text-center">2017-06-08 07:08:46</td>
						<td class="text-center">已发布</td>
						<td class="text-center">
							<a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
							<a href="javascript:void(0);" class="btn btn-danger btn-xs delete">删除</a>
						</td>
					</tr>
				</tbody>
				<!-- 分业插件容器 -->
			</table>
			<div class="row text-center">
				<ul id="pagination" class="pagination-sm""></ul>
            </div>
        </div>
    </div>
	<script>
		$(function () {
		//1.把请求回的数据渲染到页面上
			$.ajax({
				type: 'get',
				url: BigNew.category_list,
				success: function (backData) {
					if (backData.code == 200) {
				//1.1模版引擎方法 template(准备好的模版,接收到的数据)解析成拼接好的模版字符串,存入str变量中
						let str = template('categroyList', backData);
						// console.log(backData);
				//1.2覆盖原来的分类下拉按钮内容
						$('#selCategory').html(str);
					}
				}
			});
		//2.准备一个变量
			let selPage = 1;
		//3.封装函数,传入两个形参
			function getArticleData(selPage, callback) {
				//3.1
				$.ajax({
					type: 'get',
					url: BigNew.article_query,
					data: {
						type: $('#selCategory').val(),
						state: $('#selStatus').val(),
						page: selPage,//当前页码
						perpage: 2//每页显示几行
					},
					success: function (backData) {
					//	
						if (backData.code == 200) {
							let str = template('articleList', backData);
							$('tbody').html(str)
							//判断是否传入回调函数
							if (backData.data.data.lenght != 0 && callback != null) {
								$('#pagination').show().siblings('p').hide();
								callback(backData);
							} else if (selPage == 1 && backData.data.data.lenght == 0) {
								$('#pagination').hide().siblings('p').show();
							} else if (backData.data.totalPage == selPage - 1 && backData.data.data.lenght == 0) {
								$('#pagination').twbsPagination('chengeTotalPages', backData.data.totalPage, selPage - 1)
							}

							// if (callback != null) {
							//     callback(backData);
							// }
						}
					}
				})
			};
			getArticleData(selPage, function (backData) {
				$('#pagination').twbsPagination({
					first: '首页',
					prev: '上一页',
					next: '下一页',
					last: '尾页',
					totalPages: backData.data.totalPage,//总页数
					visiblePages: 10,//显示的页数
					//页码被点击执行
					onPageClick: function (event, page) {
						selPage = page;
						getArticleData(selPage, null)
						// console.log(page);
					}
				});
			});
			$('#btnSearch').on('click', function (e) {
				e.preventDefault();
				selPage = 1;
				getArticleData(selPage, function (backData) {
					$('#pagination').twbsPagination('changeTotalPages', backData.data.totalPage, 1)
				})
			});

			$('tbody').on('click', '.delete', function (e) {
				e.preventDefault();
				if (confirm('确定要删除吗')) {
					let delID = $(this).attr('data-id');
					$.ajax({
						type: 'post',
						url: BigNew.article_delete,
						data: {
							id: delID
						},
						success: function (backData) {
							if (backData.code == 204) {
								getArticleData(selPage, function (backData) {
									$('#pagination').twbsPagination('changeTotalPages', backData.data.totalPage, selPage)
								})
							}
						}
					})
				}
			})

			// $.ajax({
			//     type: 'get',
			//     url: BigNew.article_query,
			//     data: {
			//         type: $('#selCategory').val(),
			//         state: $('#selStatus').val(),
			//         page: 1,
			//         perpage: 16
			//     },
			// success: function (backData) {
			//     if (backData.code == 200) {
			//         let str = template('articleList',backData);
			//         $('tbody').html(str)
			//         //调用启动方法
			//第一次调用



			// $('#pagination').twbsPagination({
			//     first: '首页',
			//     prev: '上一页',
			//     next: '下一页',
			//     last: '尾页',
			//     totalPages: backData.data.totalPage,//总页数
			//     visiblePages: 22,//显示的页数
			//     onPageClick: function (event, page) {
			//page 当前点击的页数
			//                         $.ajax({
			//                             type: 'get',
			//                             url: BigNew.article_query,
			//                             data: {
			//                                 type: $('#selCategory').val(),
			//                                 state: $('#selStatus').val(),
			//                                 page: page,
			//                                 perpage: 10
			//                             },
			//                             success: function (backData) {
			//                                 if (backData.code == 200) {
			//                                     let str = template('articleList', backData);
			//                                     $('tbody').html(str)
			//                                     // console.log('sss');
			//                                 }
			//                             }
			//                         })






			//     $('#btnSearch').on('click', function (e) {
			//         e.preventDefault();
			//         $.ajax({
			//             type: 'get',
			//             url: BigNew.article_query,
			//             data: {
			//                 type: $('#selCategory').val(),
			//                 state: $('#selStatus').val(),
			//                 page: 1,
			//                 perpage: 10
			//             },
			//             success: function (backData) {
			//                 if (backData.code == 200) {
			//                     let str = template('articleList', backData);
			//                     $('tbody').html(str);
			//                     $('#pagination').twbsPagination('changeTotalPages', backData.data.totalPage, 1)
			//                 }
			//             }
			//         })
			//     })
		})

	</script>
		
		<script id="categroyList" type="text/html">
			<option value="">所有分类</option>
			{{each data v}}
			<option value="{{v.id}}">{{v.name}}</option>
			{{/each}}
			</script>
			<script id="articleList" type="text/html">
			{{each data.data v}}
			<tr>
			<td>{{v.title}}</td>
			<td>{{v.author}}</td>
			<td>{{v.category}}</td>
			<td class="text-center">{{v.date}}</td>
			<td class="text-center">{{v.state}}</td>
			<td class="text-center">
			<a href="article_edit.html"   data-id="{{v.id}}" class="btn btn-default btn-xs">编辑</a>
			<a href="javascript:void(0);" data-id="{{v.id}}" class="btn btn-danger btn-xs delete">删除</a>
			</td>
			</tr>
			{{/each}}
			</script>
</body>

</html>